<template>
  <view class="pageLayout">
    <u--form
      labelPosition="left"
      :model="form"
      :rules="rules"
      ref="uForm"
      labelWidth="130rpx"
    >
      <view class="base_info">
        <view class="title">基本信息</view>
        <u-form-item label="客户姓名" prop="customerName" borderBottom>
          <u--input
            v-model="form.customerName"
            border="none"
            placeholder="请输入客户姓名"
          ></u--input>
        </u-form-item>
        <u-form-item label="联系电话" prop="customerPhone" borderBottom>
          <u--input
            v-model="form.customerPhone"
            border="none"
            placeholder="请输入客户联系电话"
          ></u--input>
        </u-form-item>
        <u-form-item
          label="预约金额"
          prop="venueAmount"
          borderBottom
          @click="showMonyPicker = true"
        >
          <myPicker
            :list="monyList"
            :show.sync="showMonyPicker"
            @close="closeMonyPicker"
            keyName="label"
            v-model="form.venueAmount"
            idName="value"
            title="请选择预约金额"
            @confirm="changeAmount"
          ></myPicker>
        </u-form-item>
        <u-form-item
          label="使用日期开始"
          prop="startTime"
          borderBottom
          @click="clickTime('startTime')"
        >
          <u--input
            v-model="form.startTime"
            border="none"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择使用日期"
          ></u--input>
          <u-icon
            slot="right"
            name="arrow-right"
            :color="color"
            :customStyle="arrowRightStyle"
          ></u-icon>
        </u-form-item>
        <u-form-item
          label="使用日期结束"
          prop="endTime"
          borderBottom
          @click="clickTime('endTime')"
        >
          <u--input
            v-model="form.endTime"
            border="none"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择使用日期"
          ></u--input>
          <u-icon
            slot="right"
            name="arrow-right"
            :color="color"
            :customStyle="arrowRightStyle"
          ></u-icon>
        </u-form-item>
        <u-form-item
          label="商务车"
          prop="carCode"
          borderBottom
          @click="clickPickerCar"
        >
          <myPicker
            :list="cartList"
            :show.sync="show"
            @close="closePicker"
            keyName="carNumber"
            v-model="form.carCode"
            idName="value"
            title="请选择商务车"
            @confirm="changeCart"
          ></myPicker>
        </u-form-item>

        <!-- <u-form-item
          label="设计师"
          prop="designerName"
          borderBottom
          @click="clickPickerPer"
        >
          <multiPicker
            :value="form.selectedItems"
            :list="cartList"
            :show.sync="showPicker"
            title="请选择项目"
            :show-search="true"
            key-name="extensios"
            id-name="value"
            @confirm="handleConfirm"
          />
        </u-form-item> -->
      </view>
    </u--form>

    <view class="btn">
      <u-button type="primary" @click="submit" :loading="loading"
        >提交</u-button
      >
    </view>
    <u-datetime-picker
      v-if="todayTimestamp"
      :show="showDatePicker"
      v-model="Date"
      mode="date"
      @confirm="changeDatePicker"
      @cancel="showDatePicker = false"
      :minDate="todayTimestamp"
      :maxDate="MaxTimestamp"
      :immediateChange="true"
    ></u-datetime-picker>
    <mytoast ref="toastRef" />
    <!-- <myPicker
      :list="options"
      :show="show"
      @close="closePicker"
      keyName="label"
    ></myPicker> -->
  </view>
</template>

<script>
import myPicker from "@/components/myPicker";
import multiPicker from "@/components/multiPicker";
import {
  QueryHospitalitySelectApi,
  AddCarVenueApi,
} from "@/api/hospitality/index";
import mytoast from "@/components/mytoast.vue";
export default {
  components: {
    myPicker,
    multiPicker,
    mytoast,
  },
  data() {
    return {
      show: false, //车辆选择器
      showMonyPicker: false, //预约金额选择器
      showPicker: false,
      showDatePicker: false, //日期选择器
      loading: false,
      timeKey: "",
      form: {
        // 预约信息
        customerName: "",
        customerPhone: "",
        carCode: "",
        useDate: null,
        startTime: "",
        endTime: "",
        venueAmount: "",
        nodeAddr: null,
        nodeAddress: null,
        hospitalityCarVenueType: "",
        // designerName: "",
      },
      Date: null,
      rules: {
        // 验证规则
        customerName: {
          type: "string",
          required: true,
          message: "请填写姓名",
          trigger: ["blur", "change"],
        },
        customerPhone: [
          {
            type: "string",
            required: true,
            message: "请填写联系电话",
            trigger: ["blur", "change"],
          },
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              // 上面有说，返回true表示校验通过，返回false表示不通过
              // uni.$u.test.mobile()就是返回true或者false的
              return uni.$u.test.mobile(value);
            },
            message: "手机号码不正确",
            // 触发器可以同时用blur和change
            trigger: ["change", "blur"],
          },
        ],
        carCode: [
          {
            type: "string",
            required: true,
            message: "请选择车辆",
            trigger: ["blur", "change"],
          },
        ],
        venueAmount: [
          {
            type: "string",
            required: true,
            message: "请选择金额",
            trigger: ["blur", "change"],
          },
        ],
        startTime: [
          {
            type: "string",
            required: true,
            message: "请选择日期",
            trigger: ["blur", "change"],
          },
        ],
        endTime: [
          {
            type: "string",
            required: true,
            message: "请选择日期",
            trigger: ["blur", "change"],
          },
        ],
        // designerName: {
        //   type: "string",
        //   required: true,
        //   message: "请填写设计师姓名",
        //   trigger: ["blur", "change"],
        // },
      },
      cartList: [],
      monyList: [
        {
          label: "1000元",
          value: "1000",
          type: "Thousand",
        },
        {
          label: "2000元",
          value: "2000",
          type: "TwoThousand",
        },
        {
          label: "5000元",
          value: "5000",
          type: "FiveThousand",
        },
        {
          label: "其他",
          value: "0",
          type: "Other",
        },
      ],
      todayTimestamp: null,
      MaxTimestamp: null,
    };
  },
  computed: {
    hasLogin() {
      return this.$store.state.token && this.$store.state.token.length > 0;
    },
  },
  methods: {
    /**
     * 获取当天和后天零点时间戳
     * @param {boolean} isUTC 是否使用UTC时间
     * @returns { todayZero: number, afterTomorrowZero: number }
     */
    getZeroTimestamps(isUTC = false) {
      const getZeroDate = () => {
        const date = new Date();

        date.setHours(0, 0, 0, 0);
        return date;
      };

      // 当天零点
      const todayZero = getZeroDate().getTime();

      // 明天零点
      const afterTomorrowDate = getZeroDate();
      afterTomorrowDate.setDate(afterTomorrowDate.getDate() + 1);
      const afterTomorrowZero = afterTomorrowDate.getTime();

      return { todayZero, afterTomorrowZero };
    },
    /**
     * 获取时间选择范围
     */
    getDateSele() {
      const { todayZero, afterTomorrowZero } = this.getZeroTimestamps();
      this.todayTimestamp = todayZero;
      this.MaxTimestamp = afterTomorrowZero;
      this.Date = todayZero;
      console.log(this.todayTimestamp, this.MaxTimestamp, 8848);
    },
    /**
     * 打开时间选择器
     * @param keyName 时间对应的字段名
     */
    clickTime(keyName) {
      this.timeKey = keyName;
      this.showDatePicker = true;
    },
    /**
     * 金额选择器
     */
    changeAmount(value) {
      console.log(value, "value");
      this.form.hospitalityCarVenueType = value.type;
    },
    /**
     *
     * @param item 车辆对象
     */
    changeCart(item) {
      console.log(item, "8848");
      this.form.nodeAddr = item.nodeAddr;
      this.form.nodeAddress = item.nodeAddress;
    },
    /**
     * 日期选择
     */
    changeDatePicker(val) {
      console.log(val, "date");
      let date;
      if (this.timeKey == "startTime") {
        date = this.formatTimestamp(val.value, "onlyDate") + " 00:00:00";
      } else {
        date = this.formatTimestamp(val.value, "onlyDate") + " 23:59:59";
      }
      this.form[this.timeKey] = date;
      this.showDatePicker = false;
      console.log(this.form);
    },
    /**
     * 跳转登录
     */
    toLogin() {
      uni.navigateTo({
        url: "/pages/login/index",
      });
    },
    /**
     * 多选框
     */
    clickPickerPer() {
      this.showPicker = true;
    },
    /**
     * 点击商务车选择器
     */
    clickPickerCar() {
      if (this.form.startTime == "" || this.form.endTime == "") {
        this.$refs.toastRef.showToast({
          msg: "请先选择预约时间",
          duration: 1000,
          position: "center",
        });
        return;
      }
      this.getCartList();
      this.show = true;
    },
    /**
     * 关闭金额选择器
     */
    closeMonyPicker() {
      this.showMonyPicker = false;
    },
    /**
     * 关闭商务车选择器
     */
    closePicker() {
      this.show = false;
    },
    /**
     * 获取车辆下拉
     */
    getCartList() {
      let data = {
        startTime: this.form.startTime,
        endTime: this.form.endTime,
      };
      QueryHospitalitySelectApi(data).then((res) => {
        // console.log(res.data, "res.QueryHospitalitySelectApi");
        this.cartList = res.data.map((item) => {
          return {
            ...item,
            ...item.extensios,
          };
        });
        // console.log(this.cartList);
      }).catch((e) => {
        this.$refs.toastRef.showToast({
            msg: e.data.detail,
            duration: 1000,
            position: "center",
          });
      })
    },
    /**
     * 提交
     */
    async submit() {
      console.log(this.form);
      // return
      let action = await this.$refs.uForm.validate();
      if (action) {
        this.loading = true;
        AddCarVenueApi(this.form)
          .then((res) => {
            console.log(res, "res");
            this.$refs.toastRef.showToast({
              msg: "申请成功",
              duration: 1000,
              position: "center",
            });
            this.loading = false;
            uni.navigateBack({ delta: 1 });
          })
          .catch((e) => {
            uni.hideToast();
            // console.log(e,'e');
            this.loading = false;
            this.$refs.toastRef.showToast({
              msg: e.data.detail,
              duration: 1000,
              position: "center",
            });
          });
      }
    },
  },
  onShow() {
    // this.getCartList();
    this.getDateSele();
  },
  /**
   * 上拉加载更多
   */
  onReachBottom() {},
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules);
  },
};
</script>

<style>
page {
  background-color: #eeeeee;
}
</style>

<style lang="scss" scoped>
.pageLayout {
  padding: 20rpx;
}
.base_info {
  background-color: #ffffff;
  padding: 20rpx;
  border-radius: 16rpx;
  .title {
    font-size: 28rpx;
    font-weight: bolder;
    padding-left: 50rpx;
    border-bottom: 2rpx solid #eeeeee;
    padding-bottom: 18rpx;
  }
}
.btn {
  position: fixed;
  bottom: 50rpx;
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
}
</style>
